<script setup lang="ts" name="About">
import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";

import "swiper/swiper-bundle.css";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
import { ref, onMounted, onBeforeUnmount } from "vue";
const slides = [
  {
    key: 0,
    title: "正直进取",
    subTitle:
      "坚守底线，做正确的事情，对自己及团队有“要求”，有担当，敢于接受挑战",
  },
  {
    key: 1,
    title: "务实求真",
    subTitle:
      "接地气，在快速迭代中找到最优解，不自嗨，关注事实，注重结果，直面问题，追寻根因及本质",
  },
  {
    key: 2,
    title: "坦诚开放",
    subTitle:
      "听真话，说实话，不绕弯，主动反映问题，勇于承认错误，乐于相互揭示盲点和问题",
  },
  {
    key: 3,
    title: "协同创新",
    subTitle:
      "相信团队，打破部门壁垒，保持主动高效沟通，敢于试错，在失败中成长，不设边界，不安于现状，寻求突破",
  },
  {
    key: 4,
    title: "始终创业",
    subTitle:
      "每件事都是自己的事，保持好奇心，追求客户价值提升，拥抱变化，对不确定性保持乐观心态",
  },
];

const slidesPerView = ref(3);
const spaceBetween = ref(window.innerWidth > 600 ? 50 : 30);
const isMobile = ref(false)


const updateSlidesPerView = () => {
  slidesPerView.value = window.innerWidth > 900 ? 3 : 3;
};

const handleResize = () => {
  spaceBetween.value = window.innerWidth > 600 ? 50 : 30;
  isMobile.value = window.innerWidth > 600 ?  false: true
};

onMounted(() => {
  updateSlidesPerView();
  window.addEventListener("resize", updateSlidesPerView);
  window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", updateSlidesPerView);
  window.removeEventListener("resize", handleResize);
});
const myswiper = ref(null);
// const mySwiper = useSwiper();
const onSwiper = (swiper) => {
};
const onSlideChange = () => {
  console.log("slide change");
};

const goToNextSlide = () => {
  if (myswiper.value) {
    myswiper.value.slideNext();
  }
};
const title1 = ref(null);
const title2 = ref(null);
const title3 = ref(null);
const title4 = ref(null);
onMounted(() => {
  const observerOptions = {
    threshold: 0.1, // 当元素至少有10%在视口中时触发回调
  };

  const observerCallback = (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("in-view");
      }
    });
  };

  const observer = new IntersectionObserver(observerCallback, observerOptions);

  // 观察每个需要动画的元素
  observer.observe(title1.value);
  observer.observe(title2.value);
  observer.observe(title3.value);
  observer.observe(title4.value);
});
</script>

<template>
  <div class="about">
    <div class="banner">
      <div class="desc-bg">
        <div class="desc">
          <div class="desc-line1">关于我们</div>
          <div class="desc-line2">
            君喻科技以“通过领先的开发者孵化运营能力和<br />产业增长能力帮助社交开发者实现成功”为使<br />命，致力于成为全球领先的社交开发者孵化运营<br />平台。
          </div>
        </div>
      </div>
    </div>
    <div class="about-introduce">
      <div class="animation1" ref="title1">
        <div class="intro-title" :style="{ marginTop: 0 }">公司简介</div>
        <div class="intro-content">
          君喻是一家专注于社交产品和后台管理系统的领先互联网科技公司。我们致力于通过自主研发的社交产品和先进的后台管理系统，为用户和企业客户提供创新、高效的社交解决方案和智能化的管理服务。
          我们的核心团队拥有丰富的互联网产品研发及营销推广经验，具备卓越的研发水平和高效率。我司产品已经取得了令人瞩目的用户规模，用户遍布各个年龄段和地域。我司与行业内领先企业建立了稳固的合
          作伙伴关系，为他们提供了科技营销服务，并帮助他们实现了市场份额的快速增长。<br /><br />
          同时，君喻是一家重视人才发展、员工培养的公司，坚持“让员工在实现自我价值快速增长的同时，享受工作乐趣与组织关爱”的管理理念，在人才管理实践上，提供多维度、全链路的实践机会、更大的试错空间的赋能方式。
        </div>
      </div>

      <div class="animation2" ref="title2">
        <div class="intro-title">企业发展</div>
        <div class="intro-cards">
          <div class="intro-card intro-card1">
            <img src="./assets/avatar1.png" class="avatar" />
            <div class="year">2023</div>
            <div class="social">社交公司</div>
            <div class="other">
              音视频聊天单产品策略<br />
              区域：英语系<br />
              人群：英美系，男<br />
              供给侧：女性+自建+合作<br />
              荷尔蒙交付
            </div>
            <div class="intro-text"></div>
          </div>
          <div class="intro-card intro-card2">
            <img src="./assets/avatar2.png" class="avatar" />
            <div class="year">2024</div>
            <div class="social">社交集团</div>
            <div class="other">
              面向特定人群社交产品矩阵<br />
              区域：英美系+西班牙语系+阿拉伯<br />语系<br />
              人群：女权、亚裔、拉丁裔<br />
              供给侧：男+女+自建+合作<br />
              荷尔蒙、兴趣、同好交付
            </div>
            <div class="intro-text"></div>
          </div>
          <div class="intro-card intro-card3">
            <img src="./assets/avatar3.png" class="avatar" />
            <div class="year">2025</div>
            <div class="social">社交娱乐集团</div>
            <div class="other">
              社交娱乐为核心的音视频聊天、直<br />播、游戏产品集群<br />
              区域：欧美+中东+东南亚<br />
              人群：社交娱乐泛人群<br />
              素人、MCN、公会审核入驻
            </div>
            <div class="intro-text"></div>
          </div>
        </div>
      </div>

      <div class="animation3" ref="title3">
        <div class="intro-title">企业文化</div>
        <!-- centeredSlides -->
        <!-- navigation centeredSlides
          loop-->
        <swiper
          :ref="myswiper"
          :modules="[Navigation, Pagination, Scrollbar, A11y]"
          slides-per-view="auto"
          :centeredSlides="isMobile"
          :loop="isMobile"
          :space-between="spaceBetween"
          :pagination="{ clickable: true }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          class="myswiper"
        >
          <swiper-slide
            v-for="(slide, index) in slides"
            :key="index"
            @click="goToNextSlide"
          >
            <div class="slide">
              <div class="comma">“</div>
              <div class="slide-title">{{ slide.title }}</div>
              <div class="slide-subtitle">{{ slide.subTitle }}</div>
            </div>
          </swiper-slide>
          <div class="swiper-pagination"></div>
        </swiper>
      </div>

      <div class="animation4" ref="title4">
        <div class="intro-title">联系我们</div>
        <div class="contact">
          <div class="business" :style="{ marginBottom: '0px' }">
            商务洽谈：<span class="blue">zhuxiaohong@klyin.tech</span>
          </div>
          <div class="business address">
            公司地址：<span class="blue"
              >浙江省杭州市余杭区中泰街道仙桥路16号丝腾中泰科技园3幢6楼A6149室</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about {
  overflow: hidden;
}
.banner {
  overflow: hidden;
}
.desc-bg {
  background-image: url("./assets/banner2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.desc {
  width: 1200px;
  margin: auto;
  padding: 5% 0;
}
.desc-line1 {
  color: #fff;
  font-family: "Alibaba_PuHuiTi_Black";
  font-size: 70px;
  font-style: normal;
  font-weight: 1000;
  line-height: 117%; /* 81.9px */
  letter-spacing: -3.85px;
}
.desc-line2 {
  color: #fff;
  font-family: "Alibaba_PuHuiTi_Medium";
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: 55px; /* 183.333% */
}
.about-introduce {
  background-image: url("./assets/bg2.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 100px 0;
}
.intro-title {
  width: 1200px;
  margin: 90px auto;
  color: #0e0729;
  text-align: center;
  font-family: "Alibaba_PuHuiTi_Bold";
  font-size: 50px;
  font-weight: 700;
  line-height: 117%; /* 58.5px */
  letter-spacing: -2.75px;
}
.animation1,
.animation2,
.animation3,
.animation4 {
  width: 1200px;
  margin: 0 auto;
  opacity: 0;
}

.in-view {
  animation: mymove 2s forwards;
  -webkit-animation: mymove 2s forwards;
  transition-timing-function: linear;
}

@keyframes mymove {
  0% {
    opacity: 0;
    transform: translateY(100px); /* 初始位置在Y轴下方50px */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* 最终位置回到原位 */
  }
}
.intro-content {
  border-radius: 26px;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0px 39px 40px 0px rgba(14, 7, 41, 0.07);
  padding: 3%;
  color: #000;
  font-family: "Alibaba_PuHuiTi-Regular";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 35px; /* 175% */
}
.intro-cards {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.intro-card {
  width: 343px;
  margin: 10px;
  padding: 0 20px;
  flex-shrink: 0;
  border-radius: 26px;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0px 39px 40px 0px rgba(14, 7, 41, 0.07);
  background-repeat: no-repeat;
  background-position: top;
  /* background-size: contain; */
  background-position: top;
}
.intro-card:hover {
  border-radius: 26px;
  border: 2px solid rgba(86, 46, 231, 0.5);
  box-shadow: none;
}
.intro-card1 {
  background-image: url("./assets/follow.png");
}
.intro-card2 {
  background-image: url("./assets/colony.png");
}
.intro-card3 {
  background-image: url("./assets/transcend.png");
}
.avatar {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  margin: 45px 0 19px;
}
.year {
  color: #562ee7;
  font-family: Anton;
  font-size: 70px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.social {
  color: #562ee7;
  font-family: "Alibaba_PuHuiTi_Black";
  font-size: 24px;
  font-style: normal;
  font-weight: 1000;
  line-height: normal;
  margin: -10px 0 40px;
}
.other {
  color: #827f8d;
  font-family: "Alibaba_PuHuiTi-Regular";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 34px; /* 170% */
  margin-bottom: 30px;
}
.swiper {
  width: 1200px;
  height: 550px;
  padding-bottom: 50px;
  display: flex;
  overflow: visible;
}
.slide {
  width: 472px;
  /* display: table-cell; */
  border-radius: 26px;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0px 39px 40px 0px rgba(14, 7, 41, 0.07);
  padding: 30px;
}
.swiper-slide {
  width: auto;
}
.comma {
  height: 180px;
  color: rgba(203, 123, 252, 0.5);
  font-family: Anton;
  font-size: 200px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.slide-title {
  color: #0e0729;
  font-family: "Alibaba_PuHuiTi_Bold";
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.slide-subtitle {
  height: 150px;
  color: #827f8d;
  font-family: "Alibaba_PuHuiTi-Regular";
  font-size: 25px;
  font-style: normal;
  font-weight: 400;
  line-height: 38px; /* 152% */
}
.contact {
  border-radius: 26px;
  border: 1px solid #e6e6e6;
  background: #fff;
  box-shadow: 0px 39px 40px 0px rgba(14, 7, 41, 0.07);
  padding: 3%;
}
.business {
  color: #0e0729;
  font-family: "Alibaba_PuHuiTi_SemiBold";
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.address {
  margin-top: 40px;
}
.blue {
  color: #562ee7;
  font-family: "Alibaba_PuHuiTi-Regular";
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.swiper >>> .swiper-pagination{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.swiper >>> .swiper-pagination-bullet {
  width: 27px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 4px;
  background: #d9d9d9;
  opacity: 1;
}
.swiper >>> .swiper-pagination-bullet-active {
  width: 180px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 4px;
  background: #cb7bfc;
}
/* .swiper-pagination-bullet */
@media (max-width: 600px) {
  .desc {
    width: 350px;
  }
  .desc-line1 {
    color: #fff;
    font-size: 20px;
    font-style: normal;
    line-height: 117%; /* 23.4px */
    letter-spacing: -1.1px;
    margin-bottom: 10px;
  }
  .desc-line2 {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    line-height: 20px; /* 142.857% */
  }
  .about-introduce {
    padding: 21px 0;
  }

  .animation1,
  .animation2,
  .animation3,
  .animation4 {
    width: 350px;
    margin: 0 auto;
    opacity: 0;
  }

  .intro-title {
    width: 350px;
    margin-bottom: 15px;
    margin-top: 30px;
    font-size: 18px;
    line-height: 30px;
  }
  .intro-content {
    padding: 29px 19px 20px;
    color: #999;
    font-family: "Alibaba_PuHuiTi_Medium";
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 21px; /* 150% */
  }
  .intro-cards {
    width: 350px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .intro-card1,
  .intro-card2,
  .intro-card3 {
    position: relative;
    background-size: 67%;
    background-position: top right;
  }
  .avatar {
    width: 60px;
    height: auto;
    margin-top: 21px;
  }
  .year {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 42px;
  }
  .social {
    position: absolute;
    top: 80px;
    right: 10px;
    font-size: 14px;
  }
  .other {
    color: #827f8d;
    font-size: 14px;
    font-style: normal;
    line-height: 21px; /* 150% */
  }
  .swiper {
    width: 350px;
    height: 328px;
    margin: 0;
    padding: 0;
  }
  .swiper-slide {
    width: 300px;
    margin: 0 auto;
  }
  .swiper >>> .swiper-pagination-bullet {
    width: 8px;
  }
  .swiper >>> .swiper-pagination-bullet-active {
    width: 20px;
  }
  .animation3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .comma {
    font-size: 100px;
    height: 86px;
  }
  .slide {
    width: 300px;
    padding: 24px 20px 60px;
  }
  .slide-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .slide-subtitle {
    width: auto;
    font-size: 14px;
    height: 52px;
    line-height: initial;
  }
  .contact {
    border-radius: 10px;
  }
  .business {
    font-size: 16px;
    margin: 10px;
  }
  .blue {
    font-size: 14px;
  }
  .address {
    margin-top: 20px;
  }
}
@media (max-width: 900px) and (min-width: 601px) {
  .desc {
    width: 700px;
  }
  .desc-line1 {
    font-size: 35px;
    margin-bottom: 10px;
  }
  .desc-line2 {
    font-size: 35px;
    font-size: 16px;
    line-height: 25px;
  }
  .about-introduce {
    padding: 40px 0;
  }

  .animation1,
  .animation2,
  .animation3,
  .animation4 {
    width: 700px;
    margin: 0 auto;
    opacity: 0;
  }

  .intro-title {
    width: 700px;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 25px;
    line-height: 30px;
  }
  .intro-content {
    font-size: 15px;
    border-radius: 10px;
  }
  .intro-cards {
    width: 700px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .business {
    margin: 10px;
  }
  .swiper {
    width: 700px;
    height: 400px;
    margin: 0;
    padding: 0;
  }
  .swiper >>> .swiper-pagination-bullet {
    width: 8px;
  }
  .swiper >>> .swiper-pagination-bullet-active {
    width: 20px;
  }
  .comma {
    font-size: 100px;
    height: 100px;
  }
  .slide {
    width: auto;
  }
  .slide-title {
    font-size: 25px;
    margin-bottom: 12px;
  }
  .slide-subtitle {
    width: 280px;
    font-size: 20px;
    height: 120px;
    line-height: initial;
  }
  .contact {
    border-radius: 10px;
  }
  .business {
    font-size: 20px;
  }
  .blue {
    font-size: 20px;
  }
  .address {
    margin-top: 20px;
  }
}

@media (max-width: 1199px) and (min-width: 901px) {
  .desc {
    width: 850px;
  }
  .desc-line1 {
    font-size: 35px;
    margin-bottom: 10px;
  }
  .desc-line2 {
    font-size: 35px;
    font-size: 16px;
    line-height: 25px;
  }
  .about-introduce {
    padding: 40px 0;
  }

  .animation1,
  .animation2,
  .animation3,
  .animation4 {
    width: 850px;
    margin: 0 auto;
    opacity: 0;
  }

  .intro-title {
    width: 850px;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 25px;
    line-height: 30px;
  }
  .intro-content {
    font-size: 15px;
    border-radius: 10px;
  }
  .intro-cards {
    width: 850px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .business {
    margin: 10px;
  }
  .swiper {
    width: 850px;
    height: 400px;
    margin: 0;
    padding: 0;
  }
  .swiper >>> .swiper-pagination-bullet {
    width: 8px;
  }
  .swiper >>> .swiper-pagination-bullet-active {
    width: 20px;
  }
  .comma {
    font-size: 100px;
    height: 100px;
  }
  .slide {
    width: auto;
  }
  .slide-title {
    font-size: 25px;
    margin-bottom: 12px;
  }
  .slide-subtitle {
    width: 280px;
    font-size: 20px;
    height: 120px;
    line-height: initial;
  }
  .contact {
    border-radius: 10px;
  }
  .business {
    font-size: 20px;
  }
  .blue {
    font-size: 20px;
  }
  .address {
    margin-top: 20px;
  }
}
</style>
